<template>
    <view>
        <Header :background="background" :title="title" returnIcon="white" />
        <view class="content" :style="{'min-height': `${noBarHeight}px`}">
            <!--     获取手机验证码    -->
            <view v-if="step == 0" style="width: 100%">
                <input
                    class="input_black"
                    v-model="phone"
                    placeholder="请输入手机号"
                    type="number"
                    maxlength="11"
                    placeholder-style="font-size: 28rpx; color: #E2E2E2"
                />
                <view class="input_black">
                    <input
                        class="input_black_black"
                        v-model="code"
                        placeholder="获取验证码"
                        type="number"
                        placeholder-style="font-size: 28rpx; color: #E2E2E2"
                    />
                    <view :class="codeStatus == true ? 'no_get' : 'get_code'" @click="onCode">{{ outTime == 0 ? '获取验证码' : `重新发送${outTime}` }}</view>
                </view>
            </view>
            <!--     确认密码       -->
            <view v-else style="width: 100%">
                <input
                    class="input_black"
                    v-model="password"
                    placeholder="输入密码"
                    placeholder-style="font-size: 28rpx; color: #E2E2E2"
                />
                <input
                    class="input_black"
                    v-model="confirmPassword"
                    placeholder="再次输入密码"
                    placeholder-style="font-size: 28rpx; color: #E2E2E2"
                />
            </view>

            <view class="zxyz_btn" @click="onSubmit">
                {{ step == 0 ? '下一步' : '确认' }}
            </view>
        </view>
    </view>
</template>
<script>
import Header from "@/components/Header.vue";
import {checkCode, zhpass} from "@/utils/api/user";
var app = getApp()
export default ({
    name: "resetPassword",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '重置密码',
            noBarHeight: app.globalData.noBarHeight,
            step: 0,
            phone: '',
            code: '',
            password: '',
            confirmPassword: '',
            codeStatus: false,
            outTime: 0,
        }
    },
    watch: {
        phone(newOl, ol) {
            const phone = /^1[3456789]\d{9}$/
            if (phone.test(newOl)) {
                this.codeStatus = true
            } else {
                this.codeStatus = false
            }
        }
    },
    components: {
        Header
    },
    methods: {
        // 按钮确认提交
        onSubmit() {
            if (this.step == 0) {
                const phone = /^1[3456789]\d{9}$/
                if (this.phone == '' || !phone.test(this.phone)) {
                    uni.showToast({
                        title: '请确认手机号',
                        icon: 'none'
                    })
                } else if (this.code == '') {
                    uni.showToast({
                        title: '请输入验证码',
                        icon: 'none'
                    })
                } else {
                    const params = {
                        mobile: this.phone,
                        code: this.code
                    }
                    checkCode(params).then(res => {
                        this.step = this.step + 1
                    })
                }
            } else {
                if (this.confirmPassword == this.password && this.confirmPassword) {
                        const params = {
                            mobile: this.phone,
                            pass: this.password,
                            type: 2
                        }
                        zhpass(params).then(res => {
                            uni.showToast({
                                title: '修改成功',
                                icon: 'none',
                                duration: 1000
                            })
                            setTimeout(() => {
                                uni.redirectTo({
                                    url: '../login/login'
                                })
                            }, 1000)
                        })
                } else {
                    uni.showToast({
                        title: '请确认密码',
                        icon: 'none'
                    })
                }
            }
        },
        onCode() {
            const phone = /^1[3456789]\d{9}$/
            if (this.phone == '' || !phone.test(this.phone)) {
                uni.showToast({
                    title: '请确认手机号',
                    icon: 'none'
                })
            } else {
                const params = {
                    mobile: this.phone,
                    type: 1
                }
                if (this.outTime == 0) {
                    zhpass(params).then(res => {
                        let that = this
                        let i = 60
                        let t = setInterval(countDown, 1000);

                        function countDown() {
                            that.outTime = i
                            if (i === 0) {
                                clearInterval(t);
                            }
                            i--;
                        }
                    })
                }
            }
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    flex-direction: column;
    width: 100%;
    background: white;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    padding: 160rpx 36rpx;
    .content > view {
        width: 100%;
    }
    .input_black {
        width: auto;
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: 2rpx solid #e2e2e2;
        //text-indent: 20rpx;
        padding: 0 20rpx;
        .input_black_black {
            width: 70%;
            height: 100rpx;
        }
        .get_code {
            width: 30%;
            height: 56rpx;
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C3C3C3;
            line-height: 27rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
        }
        .no_get {
            width: 30%;
            height: 56rpx;
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            line-height: 27rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(0, #5162fd,#8e4ef7);
            color: white;
        }
    }
    .zxyz_btn {
        width: 100%;
        height: 90rpx;
        background: linear-gradient(0, #5162FD, #8E4EF7);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 40rpx;
        margin: 50rpx 0;
    }
}
</style>
